<template>
	<view>
		<!-- 搜索结果 -->
		<view class="shop-title" v-if="type.length < 1">
			<view class="shop-item">
				<view>价格</view>
				<view @click="setQuery('price')">
					<image class="imageStyleUp" src="@/static/icon/up.png"></image>
					<image class="imageStyleDown" src="@/static/icon/down.png"></image>		
				</view>
			</view>
			<view class="shop-item" >
				<view>上架时间</view>
				<view @click="setQuery('time')">
					<image class="imageStyleUp" src="@/static/icon/up.png"></image>
					<image class="imageStyleDown" src="@/static/icon/down.png"></image>
				</view>
			</view>
		</view>
		<view style="width: 100%; height: 1rpx; border-bottom: 1rpx solid gray;"></view>
		<CommodityList :dityList='result'></CommodityList>
	</view>
</template>

<script>
	import CommodityList from '@/components/common/CommodityList.vue'
	import good from '@/common/api/good/good.js'
	export default {
	data() {
		return {
			// 对查询的结果进行进一步条件查询
			//默认全部降序排列
			OrderQuery:{
				name:'',
				price:false, 
				time:false,
				page:1,
				items:8,
			},
			type:'',
			result:[],
		}
	},
	components:{
		CommodityList
	},
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		if(option.query != null){
			this.OrderQuery.name = option.query;
			this.getData();
		}
		if(option.type != null){
			this.type =option.type;
			this.getDataByTypeId(this.type);
		}
	},
	//触底方法
	onReachBottom() {
		if(this.type != null){
			this.getDataByTypeId(this.type)
		}
		if(this.query != null){
			this.getData();
		}
	},
	methods: {
			setQuery(query){
				switch(query){
					case 'price':
						this.OrderQuery.price = !(this.OrderQuery.price)
						break;
					case 'time':
						this.OrderQuery.time = !(this.OrderQuery.time)
						break;
				}
				this.getData();
			},
			getData(){
				good.getData(this.OrderQuery)
					.then(response=>{
						this.result = response.data.list;
					})
			},
			getDataByTypeId(id){
				good.getDataById(id)
					.then(res=>{
						this.result = res.data.list;
					})
			}
		},
	}
</script>
	
	<style>
	.shop-title{
		display: flex;
		justify-content: center;
	}
	.shop-item{
		display: flex;
		height: 80rpx;
		justify-content: center;
		flex: 1;
	}
	.imageStyleUp{
		position: relative;
		top:-10rpx;
		width: 30rpx;
		height: 30rpx;
	}
	.imageStyleDown{
		position: relative;
		top: 20rpx;
		left: -30rpx;
		width: 30rpx;
		height: 30rpx;
	}
	</style>
		
